<template>
    <div class="horizontalSide-wrapper flex-row ">
        <!-- <logo class="horizontalSide-logo" /> -->
        <a-menu mode="horizontal" theme="dark" :selectedKeys="[$route.path]" class="side-main">
            <template v-if="layout == 'horizontal'" v-for="item in baseRoute">
                <menu-item v-if="!item.hidden" :key="item.path" :currentRoute="item" />
            </template>
            <template v-if="layout == 'top'">
                <template v-for="item in baseRoute">
                    <menu-item v-if="!item.children && !item.hidden" :key="item.path" :currentRoute="item" />
                    <sub-menu v-if="item.children && !item.children.every(child => child.extendone == 'true')"
                        :key="item.path" :currentRoute="item"></sub-menu>
                </template>
            </template>
        </a-menu>
    </div>
</template>

<script>
import logo from './logo';
import subMenu from './subMenu';
import menuItem from './menuItem';
import { mapGetters,mapState } from 'vuex';
export default {
    name: 'sideBar',
    components: { logo, subMenu, menuItem },
    data() {
        return {};
    },
    computed: {
        ...mapGetters(['baseRoute']),
        ...mapState({
            layout: state => state.setting.layout,
        }),
    },
    watch: {
        $route() {
            this.matchRoute();
        }
    },
    created() {
        this.matchRoute();
    },
    methods: {
        //匹配左侧菜单路由
        matchRoute() {
            let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
            let { breadcrumb } = matched[0].meta || { breadcrumb: [] };
            let sideRouter = []
            if (breadcrumb.length) {
                sideRouter = breadcrumb[0].children || []
            }
            this.$store.commit('setting/SETTING_SIDE_ROUTER', sideRouter)
        }
    }
};
</script>
<style lang="scss" scoped>
.horizontalSide-logo {
    height: 54px;
    line-height: 54px;
    width: 240px;
}
.side-main {
    width: 100%;
    height: 54px;
    line-height: 54px;
}
</style>
